<template>
  <div>
    御剑乘风来,除魔天地间!==father====
    {{ $store.state.count }}===
    {{ count1 }}
    ===={{ count }}==={{ name }}
    <button
      @click="add"
    >按钮+1</button>

    <hr />
    <button @click="syncAdd">按钮+1===actions</button>
    ====求和：
    {{$store.getters.total}}==={{ total }}=
    <hr />
    <button @click="moduleHandle">按钮+1===module--namespaced</button>
    ===年龄:={{ $store.state.user.userInfo.age }}
  </div>
</template>
<script>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
  name: '',
  data () {
    return {
      obj: {
        n: 5
      }
    }
  },
  created () {
    console.log(this.$store.state.user.userInfo.name, 999);

  },
  computed: {
    count1 () {
      return this.$store.state.count
    },
    ...mapState(['count', 'name']),
    ...mapGetters(['total'])
  },
  methods: {
    ...mapMutations(['addHandle', 'shandle']),
    ...mapMutations('user', ['shandle']),
    // ...mapMutations('模块名', ['函数']),
    ...mapActions(['syncHandle', 'changeName']),
    add () {
      /* 点击按钮触发mutations */
      console.log(this, 3);
      /* 触发mutaions中的函数需要使用  commit方法 */
      // this.$store.commit('mutaions中定义好的函数')
      // this.$store.commit('addHandle', this.obj)
      // this.addHandle(this.obj)
      // this.$store.state.count++
    },
    syncAdd () {
      // 触发actions中的函数  
      /* 触发actions的函数需要使用  dispatch */
      console.log(this, 7);
      // console.log(this.$store.dispatch('syncHandle'));
      // this.$store.dispatch('syncHandle')
      // this.syncHandle(2)
      // this.$store.dispatch('changeName', 'tom')
      this.changeName('Tim')
    },

    /* moduleHandle */
    moduleHandle () {
      // this.$store.commit('user/sHandleUser')
      // this.$store.commit('user/sHandleUser')
      // this.$store.commit('setting/shandle')
      this.shandle()
    }
  }
}
</script>
<style lang='less'  scoped>
</style>